<template>
	<view class="indexBox">
		<u-sticky bgColor="#fff">
		    <u-tabs :list="tabsList" :scrollable="false" :current="current" @change="currentChange"></u-tabs>
		</u-sticky>
		<!-- 内容1 表单内容 -->
		<view class="" v-show="current == 0">
			<!-- :processId="" -->
			<leaveFrom :processId="processId" :propFromData="fromData" />
		</view>
		<!-- 内容2 审批流程 -->
		<view class="spBox" v-show="current == 1">
			<view class="titles">
				审批流程
			</view>
			<view class="spList">
				<view class="items" v-for="(item,index) in approvalInfo.activityNodes" :key="item.id">
					<view class="iconBox">
						<u-icon name="account" color="#fff" size="22"></u-icon>
						<!-- 状态 -->
						<view :class="item.status == 2 ? 'ztBox' : (item.status == 1 ? 'jzz' : (item.status == -1 ? 'wks' : 'jj'))">
							<view class="">
								<u-icon name="checkmark" color="#fff" size="12" v-if="item.status == 2"></u-icon>
								<u-icon name="edit-pen" color="#fff" size="12" v-else-if="item.status == 1"></u-icon>
								<u-icon name="clock" color="#fff" size="12" v-else-if="item.status == -1"></u-icon>
								<u-icon name="close" color="#fff" size="12" v-else-if="item.status == 3"></u-icon>
							</view>
						</view>
					</view>
					<view class="conBox">
						<view class="title">{{item.name}}</view>
						<block v-if="item.status == 2 || item.status == 1">
							<view class="itemCon" v-for="(tasksItem,tasksIndex) in item.tasks" :key="tasksIndex">
								<view class="names">{{tasksItem.assigneeUser.nickname}}</view>
								<view class="infos" v-if="index != 0 && item.status != 1">审批意见：{{tasksItem.reason}}</view>
							</view>
						</block>
						<block v-else>
							<view class="itemCon" v-for="(tasksItem,tasksIndex) in item.tasks" :key="tasksIndex">
								<view class="names">{{tasksItem.assigneeUser.nickname}}</view>
								<view class="infos" v-if="index != 0 && item.status != 1">审批意见：{{tasksItem.reason}}</view>
							</view>
							<view class="itemCon" v-for="(tasksItem,tasksIndex) in item.candidateUsers" :key="tasksIndex">
								<view class="names">{{tasksItem.nickname}}</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容3 审批操作 -->
		<view class="spOperate" v-show="current == 1 && approvalInfo.status == 1 && (userInfo.userId == processArr[processArr.length-1].assigneeUser.id) ">
			<uni-forms ref="form" :modelValue="spFormData" :label-width="100" :rules="rules">
				<uni-forms-item label="审批类型" name="type">
					<uni-data-select
					    v-model="spFormData.type"
					    :localdata="typeList"
						placeholder="请选择审批类型"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="审批理由" name="reason">
					<uni-easyinput v-model="spFormData.reason" placeholder="请输入审批理由"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<button class="button" @click="submit" type="primary">提交</button>
		</view>
	</view>
</template>

<script>
	import leaveFrom from '@/pages/process/leave/create.vue'
	import {getApprovalDetail,approveTask,rejectTask,getTaskListByProcessInstanceId} from '@/api/oa/common.js'
	import {getLeave} from '@/api/oa/leave/index.js'
	export default {
		components:{
			leaveFrom
		},
		data() {
			return {
				// tabs选中
				current:0,
				tabsList: [{
					name: '详情',
				}, {
					name: '流转',
				}],
				// 流程id
				processId:'',
				// 审批信息详情
				approvalInfo:{},
				// 表单信息
				fromData:{},
				// 审批表单
				spFormData:{
					type:'',
					reason:'',
				},
				typeList:[
					{ value: 1, text: "通过" },
					{ value: 2, text: "拒绝" },
				],
				processArr:[],
				// 当前登录用户信息
				userInfo:{},
			};
		},
		methods:{
			currentChange(val){
				console.log(val)
				this.current = val.index;
			},
			// 根据流程id获取表单内容
			async getFromData(){
				let fromData=  await getLeave({
					id:this.approvalInfo.processInstance.businessKey
				});
				fromData.data.type = String(fromData.data.type)
				this.fromData = fromData.data;
				console.log(fromData)
			},
			// 获取当前审批步骤
			async getBz(){
				let info = await getTaskListByProcessInstanceId(this.processId);
				console.log(info)
				this.processArr = info.data;
			},
			// 点击提交审批
			async submit(){
				uni.showLoading({
					title:'加载中'
				})
				let obj = {
					id:this.processArr[this.processArr.length - 1].id,
					reason:this.spFormData.reason
				};
				// 判断选择的类型
				if(this.spFormData.type == 1){
					// 通过
					let info = await approveTask(obj);
					console.log(info)
					uni.hideLoading();
					uni.showToast({
						title:'提交成功'
					});
					this.initFun();
					this.spFormData={
						type:'',
						reason:'',
					}
				}else{
					// 拒绝
					let info = await rejectTask(obj)
					uni.hideLoading();
					uni.showToast({
						title:'提交成功'
					});
					this.initFun()
					this.spFormData={
						type:'',
						reason:'',
					}
				}
			},
			async initFun(){
				let info = await getApprovalDetail({
					processInstanceId:this.processId
				});
				this.approvalInfo = info.data;
				// 获取表单信息
				this.getFromData()
				this.getBz()
			}
		},
		async onLoad(option) {
			console.log(option);
			// 获取审批详情
			this.processId = option.id;
			this.userInfo = uni.getStorageSync('loginFrom')
			this.initFun()
		}
	}
</script>

<style lang="less" scoped>
	.spBox{
		width: 100%;
		height: auto;
		background-color: #fff;
		margin-top: 20rpx;
		overflow: hidden;
		padding-bottom: 20rpx;
		.titles{
			font-size: 30rpx;
			padding: 0 30rpx;
			color: #333;
			margin: 20rpx 0;
		}
		.spList{
			width: 100%;
			height: auto;
			padding: 0 30rpx;
			box-sizing: border-box;
			.items{
				display: flex;
				align-items: flex-start;
				margin-top: 20rpx;
				position: relative;
				z-index: 100;
				.iconBox{
					width: 60rpx;
					height: 60rpx;
					background-color: rgb(63 115 247);
					border-radius: 50%;
					color: #fff;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					flex: none;
					.ztBox,.jzz,.wks,.jj{
						position: absolute;
						width: 38rpx;
						height: 38rpx;
						background-color: #fff;
						display: flex;
						margin: 0 auto;
						border-radius: 50%;
						right: -10rpx;
						bottom: -10rpx;
						view{
							width: 34rpx;
							height: 34rpx;
							background-color: #00b32a;
							border-radius: 50%;
							margin: 0 auto;
							overflow: hidden;
							margin-top: 3rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					.jzz{
						view{
							background-color: #337ecc;
						}
					}
					.wks{
						view{
							background-color: #ccc;
						}
					}
					.jj{
						view{
							background-color: red;
						}
					}
				}
				.conBox{
					flex: 1;
					min-height: 160rpx;
					background-color: rgba(234, 229, 234, 0.8);
					border-radius: 6rpx;
					padding: 20rpx;
					box-sizing: border-box;
					margin-left: 50rpx;
					.title{
						font-size: 30rpx;
						font-weight: bold;
					}
					.itemCon{
						.names,.infos{
							font-size: 24rpx;
						}
						.names{
							margin: 10rpx 0;
						}
						.infos{
							color: #8b8b8b;
						}
					}
					
				}
				&::after{
					content: '';
					display: block;
					border-left:2px solid #e4e7ed;
					height: 100%;
					position: absolute;
					left: 30rpx;
					top: 20rpx;
					z-index: -1;
				}
				&:first-child{
					margin-top: 0;
				}
				&:last-child{
					&::after{
						display: none;
					}
				}
			}
		}
	}
	.spOperate{
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 50rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 20rpx;
	}
</style>